.user-page{
  .page-scroll{
    padding: 0 $page_margin;
    position: relative;
  }

  .invite-btn{
    width: 100%;
    height: 80px;
    font-size: inherit;
  }
  .commissions-money{
    width: 33%;
    padding: 10px 0;
    font-size: 40px;
  }

  .verify-login{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $verify-login-zIndex;
    position: fixed;
  }


  .user-info{
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-qrCode{
      text-align: center;
      color: #fff;
    }
    .publicQrCode{
      width: 130px;
      height: 130px;
      border-radius: 10px;
      margin-top: 10px;
    }
    &__avatar{
      width: 108px;
      height: 108px;
      border: 4px solid #fff;
      border-radius: 50%;
      vertical-align: middle;
    }
    &__box{
      color: $theme_text_color;
      padding-left: 0px;
      margin-top: 30px;
    }
    &__name{
      font-size: 36px;
      max-width: 360px;
    }
    &__level{
      color: #fff;
      height: 36px;
      padding: 0 20px;
      font-size: 20px;
      line-height: 1;
      margin-left: 20px;
      border-radius: 0 100px 100px;
      background-image: linear-gradient(to bottom left, rgba(0, 0, 0, .9), rgba(0, 0, 0, .6));
    }
    &__code{
      font-size: 24px;
      width: 150px;
      margin-left: 10px;
    }
  }
  .phone{
    margin-top: 10px;
    background: hsla(0,0%,100%,.5);
    border-radius: 30px;
    color: #fff;
    font-size: 24px;
    padding: 4px 18px;
    text-align: center;
  }
  .user-info-cont{
    display: flex;
    justify-content: flex-start;
  }


  .member{
    &-box{
      height: 90px;
      padding: 0 $page_margin $page_margin $page_margin;
      background: #333;
      margin-bottom: -$page_margin;
      border-radius: $page_margin $page_margin 0 0;
    }
    &-crown{
      height: 36px;
      padding: 0 20px;
      background: #585858;
      border-radius: 50px;
      &__icon{
        color: #ccb81e;
        font-size: 24px;
        margin-right: 10px;
      }
      &__text{
        color: #cdb181;
        font-size: 20px;
      }
    }
    &-right{
      color: #f2f2f2;
      font-size: 24px;
    }
  }


  .user-card{
    display: flex;
    background: #fff;
    border-radius: 20px;
    margin-bottom: $page_margin;
    flex-direction: column;
    &__head{
      display: flex;
      padding: 30px;
      align-items: center;
      justify-content: space-between;
    }
    &__body{
      padding: 0 20px 20px 20px;
    }
    //&__title{
    //  font-size: 32px;
    //}
    &__more{
      color: #999;
      display: flex;
      font-size: 24px;
      align-items: baseline;
    }
    &__name{
      color: #666;
      font-size: 24px;
    }
    &__unit{
      color: #999;
      font-size: 20px;
      margin-left: 10px;
    }
  }

  .total{
    &-list{
      padding: $page_margin 0;
      display: flex;
    }

    &-item{
      flex: 1;
      height: 100px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      &:after{
        border-color: rgba(153, 153, 153, .2)
      }
    }

    &-name{
      color: #666;
      font-size: 24px;
    }
    &-amount{
      color: #000;
      font-size: 40px;
    }
  }


  .order-type{
    width: 100%;
    margin: 20px 0;
    white-space: nowrap;
    &__list{
      display: inline-flex;
      flex-wrap: nowrap;
    }
    &__item{
      width: 130px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    &__icon{
      width: 80px;
      height: 80px;
    }
    &__name{
      margin-top: 10px;
    }
  }
  .bind-phone{
    &__box{
      height: 50px;
      background: #F8F8F8;
      border-radius: 50px;
    }
    &__text{
      font-size: 24px;
      padding-left: 24px;
    }
    &__btn{
      height: 50px;
      font-size: 24px;
    }
  }


  .operate{
    &-list{
      display: flex;
      padding: 20px 0;
      flex-wrap: wrap;
    }
    &-item{
      width: 20%;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      flex-direction: column;
    }
    &-icon{
      width: 80px;
      height: 80px;
      margin: 10px 0;
    }
    &-name{
      font-size: 26px;
      text-align: center;
    }
  }
}

